<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-title">
        <h2>食养健康系统</h2>
        <p>登录您的账号</p>
      </div>

      <van-form ref="loginFormRef" @submit="handleLogin">
        <van-cell-group inset>
          <van-field
            v-model="loginForm.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请输入用户名' }]"
          >
            <template #left-icon>
              <van-icon name="user-o" />
            </template>
          </van-field>

          <van-field
            v-model="loginForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          >
            <template #left-icon>
              <van-icon name="lock" />
            </template>
          </van-field>
        </van-cell-group>

        <div class="login-options">
          <van-checkbox v-model="rememberMe">记住我</van-checkbox>
          <a class="forget-link" href="javascript:;">忘记密码？</a>
        </div>

        <div style="margin: 16px">
          <van-button
            round
            block
            type="primary"
            native-type="submit"
            :loading="loading"
          >
            登录
          </van-button>
        </div>
      </van-form>

      <div class="register-link">
        还没有账号？
        <a @click="$router.push('/register')">立即注册</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";
import { login } from "../api/user";
import { setToken, setUserInfo } from "../utils/auth";
import { useUserStore } from "../stores/userStore";

// 路由实例
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

// 登录表单引用
const loginFormRef = ref();

// 登录表单数据
const loginForm = reactive({
  username: "",
  password: "",
});

// 记住我
const rememberMe = ref(false);

// 登录状态
const loading = ref(false);

// 登录处理
const handleLogin = async () => {
  try {
    loading.value = true;
    const res = await login(loginForm);

    // 打印完整响应以进行调试
    console.log("登录响应数据:", res);

    if (res.code === 200) {
      // 检查token是否存在
      if (!res.token) {
        console.error("返回数据中缺少token:", res);
        showToast("登录失败：缺少认证令牌");
        return;
      }

      // 使用auth工具保存token
      setToken(res.token);

      // 保存后端返回的用户信息
      if (res.data && res.data.id) {
        // 打印用户信息
        console.log("完整的用户数据:", res.data);

        // 确保有必要的属性，如果后端未提供则使用默认值
        const userInfo = {
          id: res.data.id,
          username: res.data.username || loginForm.username,
          nickname: res.data.nickname || loginForm.username,
          role: res.data.role || "user", // 如果后端未返回role，默认为普通用户
          email: res.data.email || "",
          gender: res.data.gender || 0,
        };

        // 使用auth工具保存用户信息
        setUserInfo(userInfo);

        // 更新用户store
        userStore.userInfo = userInfo;

        console.log("用户信息保存成功:", userInfo);

        showToast("登录成功");

        // 跳转到重定向页或首页
        const redirectPath = route.query.redirect || "/home";
        router.replace(redirectPath);
      } else {
        // 记录错误情况
        console.error("用户数据缺失或格式不正确:", res.data);

        showToast({
          message: "登录成功，但用户信息不完整",
          type: "warning",
        });

        // 尝试构建最小可用的用户信息
        const minimalUserInfo = {
          username: loginForm.username,
          nickname: loginForm.username,
          role: "user",
        };
        setUserInfo(minimalUserInfo);

        // 更新用户store
        userStore.userInfo = minimalUserInfo;

        console.log("已创建最小用户信息:", minimalUserInfo);

        // 仍然跳转到首页
        router.replace("/");
      }
    } else {
      // 记录错误响应
      console.error("登录失败，响应码:", res.code, "错误信息:", res.message);
      showToast({
        message: res.message || "登录失败",
        type: "fail",
      });
    }
  } catch (error) {
    console.error("登录请求异常:", error);
    // 提取更具体的错误信息
    let errorMsg = "登录失败";
    if (error.response && error.response.data) {
      // 优先使用服务器返回的错误信息
      errorMsg = error.response.data.message || errorMsg;
      console.error("服务器错误响应:", error.response.data);
    } else if (error.message) {
      // 如果有错误消息，则使用它
      errorMsg = error.message;
    }
    showToast({
      message: errorMsg,
      type: "fail",
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f8fa;
}

.login-box {
  width: 85%;
  max-width: 400px;
  padding: 30px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
}

.login-title h2 {
  font-size: 24px;
  color: #323233;
  margin-bottom: 8px;
  font-weight: 600;
}

.login-title p {
  font-size: 14px;
  color: #969799;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 16px;
}

.forget-link {
  font-size: 14px;
  color: #1989fa;
  text-decoration: none;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #969799;
}

.register-link a {
  color: #1989fa;
  text-decoration: none;
}
</style>
